<!DOCTYPE HTML>

<html>

<head>

    <title>厚德开福</title>

    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <link href="{{ URL::asset('/') }}ku/css/1_style.css" rel="stylesheet">
    <script src="{{ URL::asset('/') }}ku/css/jquery-1.8.3.min.js"></script>
    <script src="{{ URL::asset('/') }}web/js/libs/dropload-gh-pages/dist/dropload.js"></script>
    <script src="{{ URL::asset('/') }}web/js/libs/baiduTemplate.js"></script>
    <link rel="stylesheet" href="{{ URL::asset('/') }}web/css/dropload.css">

</head>


<style>

    @font-face {font-family: "iconfont";
        src: url('//at.alicdn.com/t/font_5knyhat0o8mmquxr.eot?t=1493300495082'); /* IE9*/
        src: url('//at.alicdn.com/t/font_5knyhat0o8mmquxr.eot?t=1493300495082#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('//at.alicdn.com/t/font_5knyhat0o8mmquxr.woff?t=1493300495082') format('woff'), /* chrome, firefox */
        url('//at.alicdn.com/t/font_5knyhat0o8mmquxr.ttf?t=1493300495082') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
        url('//at.alicdn.com/t/font_5knyhat0o8mmquxr.svg?t=1493300495082#iconfont') format('svg'); /* iOS 4.1- */
    }

    .iconfont {
        font-family:"iconfont" !important;
        font-size:16px;
        font-style:normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .icon-more:before { content: "\e6a7"; }

    .icon-xiangji:before { content: "\e6fd"; }

</style>

<body>

<header style="
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        padding: 20px;
        background: #f5f5f5;
">
    <h1 style="font-size: 28px;color: #3CC51F">不文明行为曝光台</h1>
    <h2 style="font-size: 14px;color: grey">随时随地曝光不文明</h2>
</header>

<div id="main">
    <!--<div id="share_show">
        <img src="images/share.png" style="width:90%;" />
    </div>-->
    <div class="content" style="
        padding: 0;
        background: #fff;
        margin-bottom: 88px;
        height: 30rem;
        -webkit-overflow-scrolling:touch;
        overflow: scroll;
    ">
        <ul class="list" style="padding-top: 20px;">

        </ul>
    </div>
    <a href="/add" style="
        height: 44px;
        width: 100%;
        text-align: center;
        position: fixed;
        bottom:0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #3CC51F;
        padding: 10px 0;
        background: #f5f5f5;
    ">
        <div ><i style="font-size: 28px;" class="iconfont icon-xiangji"></i></div>
        <div style="font-size: 12px;">我要曝光</div>
    </a>
</div>

<input type="hidden" id="page" value="1" />

<style>body > span{display:none;}</style>

<script>
    $(function(){

        $("#share a").click(function(){
            $("#guide").show();
        });

        $("#guide").click(function(){
            $(this).hide();
        });
        dropload();
    });


    function dropload() {
        // 上拉加载-----start------
        dropload = $('.content').dropload({
            distance : 100,
            domUp : {
                domClass   : 'dropload-up',
                domRefresh : '<div class="dropload-refresh">↓下拉刷新</div>',
                domUpdate  : '<div class="dropload-update">↑释放更新</div>',
                domLoad    : '<div class="dropload-load"><span class="loading"></span>加载中...</div>'
            },
            domDown : {
                domClass   : 'dropload-down',
                domRefresh : '<div class="dropload-refresh">↑上拉加载更多</div>',
                domLoad    : '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
                domNoData  : '<div class="dropload-noData">暂无数据</div>'
            },
            loadUpFn : function(load){
                var page = 1;
                $.ajax({
                    type: 'GET',
                    url: '/index?page=' + page ,
                    dataType: 'json',
                    success: function(data){
                        if(data.data.msgs.length == 0){
                            load.noData(true);
                        }
                        $('#page').val(data.data.page * 1 + 1);
                        var bt = baidu.template;
                        var html = bt('msg',{data:data.data.msgs});
                        $('.list').html(html);
                        load.resetload();

                    },
                    error: function(xhr, type){
                        layer.msg('服务器连接错误,请稍候重试!' , {time:500});
                        // 即使加载出错，也得重置
                        load.noData(true);
                        load.resetload();
                    }
                });

            },
            loadDownFn : function(load){
                var page = $('#page').val();
                $.ajax({
                    type: 'GET',
                    url: '/index?page=' + page,
                    dataType: 'json',
                    success: function(data){

                        if(data.data.msgs.length == 0){
                            load.noData(true);
                        }
                        $('#page').val(data.data.page * 1 + 1);
                        var bt = baidu.template;
                        var html = bt('msg',{data:data.data.msgs});
                        $('.list').append(html);

                        load.resetload();

                    },
                    error: function(xhr, type){
                        layer.msg('服务器连接错误,请稍候重试!' , {time:500});
                        // 即使加载出错，也得重置
                        load.noData(true);
                        load.resetload();

                    }
                });

            }
        });
        //上拉加载----end----

        return dropload;
    }


</script>

<script type="text/html" id="msg">
    <% for (var i=0; i < data.length ; i++ ) { %>
    <li style="margin-bottom: 20px;">
        <div class="po-avt-wrap">
            <img class="po-avt data-avt" src="<%= data[i].headimgurl %>">
        </div>
        <div class="po-cmt">
            <div class="po-hd">
            <p class="po-name"><span class="data-name"><%= data[i].nick_name %></span></p>
            <p style="font-size: 12px;color:#ccc;margin-bottom: 10px;"><%= data[i].created_at %></p>
            <div class="post">
                <p>曝光位置:<%= data[i].address %></p>
                <p>曝光类型:<%= data[i].num %></p>
                <% if(data[i].remark != null){ %>
                    <p>用户留言:<%= data[i].remark %></p>
                <% } %>
                <div style="display: flex;flex-wrap: wrap">
                    <img class="list-img" src="<%= data[i].img[0] %>">
                    </div>
                </div>
            </div>
        </div>
        </li>
    <% } %>
</script>

</body>

</html>